<template>
    <div class="contentShadow">
        <h1>志愿服务表</h1>
        <el-form :model="formObj" :rules="formRules" ref="formObj" label-position="right">
            <!--            <el-form-item style="width:96%" label="手机号" prop="phone">
                            <el-input v-model="formObj.phone" palceholder="请输入手机号"></el-input>
                        </el-form-item>-->
            <el-form-item>
                <dynamic :dynamicData='dynamicData' :timestamp='timestamp'
                         @dynamicFormChange="dynamicFormChange"></dynamic>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm1('formObj')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import Dynamic from './StudentVolunteerDynamic.vue'

export default {
    data() {
        return {
            dynamicData: {
                domains: [{
                    time: '',
                    spot: '',
                    level: '',
                    role:'',
                    activity:'',
                    value: ''
                }]
            },
            timestamp: '',
            formResult: [],
            formObj: {
                phone: ''
            },
            formRules: {
                phone: [{required: true, message: '请输入手机号', trigger: 'blur'},
                    {pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码'}]
            },
        };
    },
    components: {
        Dynamic
    },
    methods: {
        submitForm1(formName) {
            console.log(this.dynamicData.domains[0].time);
            this.timestamp = Date.now().toString();
            /*this.$nextTick(() => {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        if (!this.formResult) {
                            return
                        }
                        // 传给后端的值
                        let params = {
                            ...this.formObj,
                            'formdata': this.formResult
                        }
                        console.log('传给后端的值---', params)
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            })*/
        },
        dynamicFormChange(data) {
            this.formResult = data;
            console.log('子组件传来的值', data)
        }
    }
};
</script>
<style>

.activity {
    padding: 20px;
}
</style>
